<template>
  <div class="page-container-padding">
    <!-- 模块 -->
    <div class="module-box">
      <vab-icon :icon="['fas', 'file-powerpoint']" class="icon"></vab-icon>
      <span class="module-name">PPT课件</span>
    </div>
    <!-- 申请表单 -->
    <div style="width: 500px">
      <el-form
        ref="ApplyForm"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        label-position="right"
      >
        <el-form-item prop="title" label="课件主题">
          <el-input
            v-model="formData.title"
            placeholder="请输入要撰写的课件主题"
          ></el-input>
        </el-form-item>
        <el-form-item prop="companyName" label="课件对象">
          <el-input
            v-model="formData.companyName"
            placeholder="请输入课件受用对象"
          ></el-input>
        </el-form-item>
        <el-form-item prop="duration" label="课件时长">
          <el-input
            v-model="formData.duration"
            placeholder="请输入课件所需时长"
          ></el-input>
        </el-form-item>
        <el-form-item label="完成时间" prop="finishTime">
          <el-date-picker
            v-model="formData.finishTime"
            type="datetime"
            placeholder="选择课件完成的时间"
            align="right"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="linkMsg">
          <el-input
            v-model="formData.linkMsg"
            placeholder="请输入您的联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item label="课件要求" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            placeholder="课件的要求等"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button>取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="toSubmit">
          确定提交
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { CreatePPTCoursewareRecord } from '@/api/prodService/pptCourseware'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  export default {
    data() {
      return {
        submitLoading: false,
        formData: {
          companyName: '',
          title: '',
          duration: '',
          finishTime: new Date(),
          linkMsg: '',
          content: '',
        },
        formRules: {
          companyName: [
            { required: true, message: '请输入课件对象', trigger: 'change' },
          ],
          title: [
            { required: true, message: '请输入课件主题', trigger: 'change' },
          ],
          duration: [
            {
              required: true,
              message: '请输入课件的时长要求',
              trigger: 'change',
            },
          ],
          finishTime: [
            { required: true, message: '请选择完成时间', trigger: 'change' },
          ],
          linkMsg: [
            {
              required: true,
              message: '请选择输入联系方式',
              trigger: 'change',
            },
          ],
        },
      }
    },
    mounted() {},
    methods: {
      toSubmit() {
        this.$refs.ApplyForm.validate((validate) => {
          if (!validate) {
            return
          }
          const formdata = {
            company_name: this.formData.companyName,
            title: this.formData.title,
            duration: this.formData.duration,
            finish_time: datetimeToStr(this.formData.finishTime, false, '-'),
            link_msg: this.formData.linkMsg,
            content: this.formData.content,
          }
          this.submitLoading = true

          CreatePPTCoursewareRecord(formdata)
            .then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.$refs.ApplyForm.resetFields()
              this.submitLoading = false
            })
            .catch((err) => {
              this.submitLoading = false
            })
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .module-box {
    padding: 4px 6px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 5px 5px 0 0;
    margin-bottom: 16px;
    .icon {
      color: #fd5516;
    }
    .module-name {
      margin-left: 10px;
    }
  }
</style>
